import React, { Component } from 'react';
import pic from '../../assets/5.png'
import '../../styles/Alist.css'
import propTypes from 'prop-types'
import { withRouter } from 'react-router-dom';
import { getAllprolist } from '../../api/allpro'
class Alist extends Component {
    constructor(props) {
        super(props)
        this.state = {
            slist:[]
        }
    }

    //从底部导航过来时的默认数据
  async componentDidMount(){
    let res1 = await getAllprolist({ id:282657})
    // console.log(res1.data.list);
    this.setState({
           slist:res1.data.list
    })
   }

    //点击跳转详情页
    goDetail(id){      
      this.props.history.push('/detail/'+id)
    }
    render() {
        // console.log( this.props.plist);
        return (
            <div className='alist'>
                             {/* 有的分类没有数据时 */}
                {
                    this.props.plist==undefined && <div className='null'> 该分类下没有商品哦，请检查网络哦~</div>
                }
                       {/* 渲染搜索关键字或者点击三级分类来的数据 */}
                {
                   this.props.plist && this.props.plist.length != 0 &&
                    this.props.plist.map((item, index) => {
                            return (
                                <div className='itemli' key={index} onClick={()=>{this.goDetail(item.id)}}>
                                    <img src={item.pic} alt="" />
                                    <p>{item.name}</p>
                                    <span>原价￥{item.salesPrice.value}</span>
                                    <p>活动价￥<span>{item.salesPrice.value}</span></p>
                                </div>
                            )
                        })
                }
                             {/* 渲染默认显示的数据 */}
                {
                   this.props.plist && this.props.plist.length == 0 &&
                     this.state.slist.map((item, index) => {
                        return (
                            <div className='itemli' key={index} onClick={()=>{this.goDetail(item.id)}}>
                                <img src={item.pic} alt="" />
                                <p>{item.name}</p>
                                <span>原价￥{item.salesPrice.value}</span>
                                <p>活动价￥<span>{item.salesPrice.value}</span></p>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

//父传过来的值类型验证，但是报错
// Alist.propTypes={
//     plist:{type:propTypes.array,default:[]}
// }
export default withRouter(Alist);